jQuery effects not working after UpdatePanel Asynchronous request is over


A few days ago I was working on a project that involves a really good looking design and it had some fancy effects on a page with the help of jQuery library

The fancy effect was about showing a button over the picture with the title “View larger” when the mouse hovered over it and it went off and on with the fade effect and some good looking collapsible panels. The items were shown on the basis of a filtering criteria given by the user and I put that section in an UpdatePanel control. On first page load every thing was working A-OK but as soon as there was any Asynchronous Post back, whether from a drop down list or from any check box, all the jQuery effects just vanished.

So the problem was quite vague when I first looked at it, it wasn’t clear as to why the application is behaving this way so I started testing every peace of javascript I could find and mind you I didn’t know any thing about jQuery by that time so when I came up to this I started googling it too, studied how it worked.

Then I came to know that there’s an event called the Ready event, which is fired once to DOM is fully loaded. and I noticed in the code that there were lots of things that were getting initialized in this event which was found in three different files in my case. So I took out the code in the “ready” events and put them in 3 separate JavaScript functions, called them from the ready event AND then did the part that ACTUALLY solved the issue. WHAT WAS THE ISSUE?? Well, the issue was that after an async post back the ready event isn’t fired. So I had to find a way to actually call a JavaScript function after ANY Async post back. After a little Googling I came up to this fine link

http://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-updatepanel-asychronous-ajax-request-is-over/

where Zeeshan Malik explains how to do that. So I did it like this:

I wrote this function in the master page

function load(){
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}

function EndRequestHandler(){

ReadyFunction1();

ReadyFunction2();

ReadyFunction3();

}

and called this in the onload event the body tag  as

<body onload=”load()”>

And the problem got knocked out!

For your convenience, here are some useful links.

http://www.sitepoint.com/article/ajax-jquery/

http://docs.jquery.com/Tutorials:AJAX_and_Events

Happy Programming Folks!

Author: Imran Akram

A .NET/SharePoint Consultant and a political enthusiast who believes in putting the feet of the elected and/or unelected officials to fire in order to get good governance.

47 thoughts on “jQuery effects not working after UpdatePanel Asynchronous request is over”

  1. Hi Imran

    I found an alternative solution that could also work. The problem seems to be like you said: the jQuery ready function is not called on an async postback. The pageLoad() ASP.NET ajax method is called however.

    It seems that ASP.NET ajax and jQuery don’t get along together when it comes to the DOM load event, and ASP.NET ajax takes preference to the jQuery ready function.

    So in short replace all jQuery: $(document).ready() instances in your code with function pageLoad(). This I think is a more elegant solution then intercepting the end_request event and altering the master page.

    Hope this adds to your useful article.

    Reply

    3. Thanks Imran,

      It fixed jquery and ajax problem in my project as well by putting js functions into master page.

      But, what if I had 100 readyFunctions, I was wondering is there a more elegant way of achieving this? Rather than fitting all those ready functions into master page.

      Thanks!

      Reply

  2. Hi there,

    Thanks for sharing the info, really appreciate this. Yes I think its a much more elegant solution, I’ll definately try and implement that on my end and see what happens.

    Cheers.

    Reply

  4. Dnoxs, thank you vary much: it works as you described. You made my day. Just a clarification for novices like me: you need to include the word ‘function’, i.e. ‘function pageLoad()’, not just ‘pageLoad()’.

    Reply

  13. Hi there,

    I got the same problem, anyone mind helping me out?

    in init.js i use:

    jQuery.noConflict();
    jQuery(document).ready(function($){
    CODE
    });

    Can’t seem to figure out where to place
    function pageLoad()

    Reply

  14. Thanks a lot.
    I had spend 3 days developing a new Web User Control, and when I added to the main project, it don’t work.
    You have saved my day.

    Reply

  17. I was using the following JQuery tooltip which was not working on post backs:

    $(document).ready(function(){
    $(‘.tTip’).betterTooltip({speed: 150, delay: 300});
    });

    I change this to the following to get it working on post backs:

    function pageLoad(){
    $(‘.tTip’).betterTooltip({speed: 150, delay: 300});
    }

    Reply
  19. Pingback: jQuery and ASP.NET UpdatePanel

  20. thanks. it was very helpful post because when i came across this issue i wasn’t aware how to proceed and from where to proceed.
    keep up doing good work…

    Reply

  21. Just wanted to say thank you to both Imran and Alexander Davis for taking the time to teach us about this anoying problem.
    You save me a lot of work. It worked for me in an overlay example.
    Take care.

    Reply

  23. Hi Imran
    Many thanks for the your solution. I have a UpdatePanel which contains a jQuery UI Tab which houses different ASP.NET 3.5 datagrid pager’s on the tab pages. When the datagrid pager does a partial postback to fetch the page specific data, all the jQuery formatting in the jQuery tabs was being lost. (they get converted back to normal DIV’s).

    I googled for 2 days and eventually came to your blog.

    I implemented your solution and voila everything works.

    Reply

  24. Please Try to Change pageload () function with below code.
    function pageLoad(sender, args)
    {
    var isAsyncPostback = Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack();
    if (isAsyncPostback) {

    function1()
    function2();
    }
    }

    Reply

  28. HI, AI M USING ASP FILE UPLOAD CONTROL WITHIN JQUERY MODAL POP UP BUT NONE OF SERVER CONTROL WORKS UNDER THIS MODAL POPUP CAN ANYONE HELP ME PLZ .

    THANX IN ADAVACE.

    Reply

  31. You can paste this code inside the body section
    ————————————————-

    $(document).ready(function () {
    $(“#demo a[title]”).tooltip();
    });

    Paste the below code inside the .cs file
    ————————————————–
    protected void Page_Load(object sender, EventArgs e)
    {
    string javaScriptFunction =
    “$(document).ready(function () {” +
    “$(‘#demo a[title]’).tooltip()” +
    “});”;
    Page.ClientScript.RegisterStartupScript(typeof(Page), “ajaxTrigger”, “Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);”, true);
    Page.ClientScript.RegisterClientScriptBlock(typeof(Page), “EndRequest”, “function EndRequestHandler(sender, args){” + javaScriptFunction + “}”, true);

    }

    Reply
  35. Pingback: Jquery não funcionando após postback com UpdatePanel | Sharepoint 4 BR

Leave a comment